<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1.0">
    <title>分享页面</title>
    <script src="${ctx}/js/jquery1.8.2.min.js"></script>
    <script src="${ctx}/js/vue.min.js"></script>
    <link rel="stylesheet" href="${ctx}/css/reset.css">
    <script src="${ctx}/js/changeSize.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.fileDownload/1.4.2/jquery.fileDownload.js"></script>
</head>
<style>
    html{
        background: url("${ctx}/image/jietu/bg.png") no-repeat #fff;
        background-size: 100% auto;
        overflow:hidden
    }
    body{
        overflow-x: initial;
    }
    .con_box{
        padding: 1rem 0.5rem;
    }
    .head{
        display: flex;
    }
    .head .logo{
        width: 3.5rem;
        height: 3.5rem;
        margin-right: 0.3rem;
    }
    .head .head_tit_box{
        width: 16rem;
    }
    .head .title{
        color: #fff;
        font-weight: 600;
        font-size: 1rem;
        line-height: 2rem;
    }
    .head .explain{
        font-size: 0.6rem;
        font-weight: 400;
        padding: 0.5rem 0.3rem;
        color: #fff;
        display: flex;
        justify-content: space-between;
        opacity: 1;
    }
    .head .explain label{
        opacity: 0.5;
        margin: 0 0 0 0.3rem;
    }
    .head .explain img{
        width: 0.7rem;
    }

    .red_envelopes_box{
        background: url("${ctx}/image/jietu/red_envelopes.png")no-repeat;
        background-size: 100% auto;
        height: calc(100vw - 3rem);
    }
    .red_envelopes_box p{
        font-size: 2.5rem;
        font-weight: 600;
        text-align: center;
        padding-top: 51%;
        color: #EC3E00;
    }
    .red_envelopes_box p span{
        font-size: 1.5rem;
    }
    .red_envelopes_box label{
        width: 14rem;
        font-size: 0.8rem;
        color: #999999;
        display: block;
        line-height: 1.2rem;
        margin: 7% auto auto;
        text-align: center;
    }
    .open_app{
        width: 13rem;
        height: 2.5rem;
        display: block;
        text-align: center;
        line-height: 2.5rem;
        border-radius: 1.5rem;
        font-size: 0.75rem;
        color: #fff;
        background: linear-gradient(to right, #f99137 , #f96d27);
        margin: 2rem auto auto;
        text-decoration: none;
    }
    .dow_app{
        width: 12.5rem;
        height: 2rem;
        display: block;
        text-align: center;
        line-height: 2.2rem;
        border-radius: 1.5rem;
        font-size: 0.75rem;
        color: #F96D27;
        background: #fff;
        margin: 1rem auto auto;
        border: 0.15rem solid transparent;
        position: relative;
    }
    .dow_app::after{
        position: absolute;
        top: -0.2px; bottom: -0.2px;
        left: -0.2px; right: -0.2px;
        background: linear-gradient(to right, #f99137 , #f96d27);
        content: '';
        z-index: -1;
        border-radius: 1.5rem;
    }

    .mask_wx{
        width: 100vw;
        height: 100%;
        left: 0;
        top: 0;
        position: fixed;
        z-index: 999999;
        background: rgba(0,0,0,0.7);
        text-align: right;

    }
</style>
<body>
<div id="app">
    <div class="con_box">
        <div class="head">
            <img class="logo" :src="task.icon">
            <div class="head_tit_box">
                <div class="title">{{task.title}}</div>
                <div class="explain">
                    <div>
                        <img src="${ctx}/image/jietu/time.png"><label>任务时间：</label>{{task.taskTime}}
                    </div>
                    <div>
                        <img src="${ctx}/image/jietu/explain.png"><label>剩余任务个数：</label>{{task.num}}
                    </div>
                </div>
            </div>
        </div>
        <div class="red_envelopes_box">
            <p>
                {{task.showMoney}}
                <span>
                        元
                    </span>
            </p>
            <label>
                {{task.shareIntroduce}}
            </label>
        </div>
        <a class="open_app" :href="addr">打开APP立即领取</a>
        <div class="dow_app" @click="dow('')">还没有APP，去下载</div>

        <div  class="mask_wx" v-if="iswx">
            <img src="http://lanrenzhushou.oss-cn-shenzhen.aliyuncs.com/web/service/image/69b054bdca0247419e7b20dc61f772ad.png" style="width: 70px;margin: 40px 40px 0px 0px;">
            <img src="http://lanrenzhushou.oss-cn-shenzhen.aliyuncs.com/web/service/image/9a7e5adf969d421eb183def53623fed1.png" style="width: 185px;margin: 32px auto;display: block;">
        </div>
    </div>
</div>
</body>
</html>
<script>
    var downloadPkg = '${downloadPkg}';
    var openAddr = '${openAddr}';

    var app = new Vue({
        el: '#app',
        data: {
            iswx:false,
            ids: '',
            task:{},
            addr:""
        },
        mounted: function () {
            this.ids = '${taskId}';
            this.getData();
            let ua = navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                this.iswx=true
            }
            this.setAddr();

        },
        methods: {
            setAddr: function(){
                this.addr=openAddr+"?category="+this.task.type+"&taskid="+this.ids;
            },
            getData: function(){
                var that = this;
                var res = that.ajax("/newweb/share/" + that.ids, "", 'get');
                console.log(res)
                if (res.success) {
                    that.task = res.data;
                } else {
                    console.log('fail',res);
                }
            },
            ajax: function (url, data, type) {
                var i;
                $.ajax({
                    url: url,
                    type: type,
                    async: false,
                    data: data,
                    //headers: JSON.parse(header),
                    // headers:{"appStore":"test","appid":"xianyu","brand":"test","imei":"863254030974322","lat":"","lng":"","macAddr":"C4:0B:CB:F2:C7:18","os":"Othernull","osv":"MI 6","sign":"7e058d5d632eaf9e75de4a687f12fdfd","time":"1565253309935","userid":"8f5cbd2a-f22d-4205-a7af-be2880a24a5b","version":"100"},

                    dataType: "json",
                    success: function (res) {
                       // window.xy_web.dismissLoading();
                        i = res;
                    },
                    error: function () {
                       // window.xy_web.dismissLoading();
                    }
                });
                return i;

            },
            dow: function(url) {
                console.log(downloadPkg);
                let that = this;
                let a = document.createElement('a');
                // 设置图片地址
                a.href = downloadPkg;
                a.click();
            }
        }
    });

</script>
